<template>
    <div class="logistics-computed">
        <h4>Get shipping rates for all products and regions</h4>
        <div class="computed-tabs" :class="{ disabled: true,active: tabsOpen }">
            <div class="computed-tabs-wap" @click="tabsOpen = !tabsOpen"><svg-icon name="tree-down" /></div>
            <ul :class="{ disabled: is_loading }">
                <li v-for="(item, index) in tabs" :key="index" @click="setActiveWeight(item)" :class="{ active: active_weight == item.weight }">
                    <svg-icon name="t-shirt-icon" v-if="item.icon == 't-shirt-icon'" />
                    <svg-icon name="long-sleeves-icon" v-if="item.icon == 'long-sleeves-icon'" />
                    <svg-icon name="sweatshirts-icon" v-if="item.icon == 'sweatshirts-icon'" />
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
        <div class="computed-table" :class="{ loading: is_loading }">
            <UxLoading :loading="is_loading" />
            <table>
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>Shipping method</th>
                        <th>Shipping time</th>
                        <th>First item</th>
                        <th>Additional item</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody v-show="loading.base">
                    <tr class="loading">
                        <td :colspan="6">
                            <img src="@/assets/images/loading.gif" alt="" />
                        </td>
                    </tr>
                </tbody>
                <!-- 基础国家 -->
                <tbody v-for="(item, index) in base_country" :key="'base' + index">
                    <tr :key="index + 'pk'">
                        <td v-text="item[1]" :rowspan="getValue(country_base_info,index,'length')"></td>
                        <td v-text="'Standard shipping'"></td>
                        <td v-text="getValue(country_base_info[index],'pk_shipping','need_time_min','-') + ' - ' +getValue(country_base_info[index],'pk_shipping','need_time_max','-') + ' business days'"></td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_base_info[index],'pk_shipping','price','-','num')" type="unit|price" />
                        </td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_base_info[index],'pk_shipping','next_price','-','num')" type="unit|price" />
                        </td>
                        <td :rowspan="getValue(country_base_info,index,'length')">
                            <button @click="
                                    delCountryInfo(
                                        country_base_info[index] || {},
                                        index,
                                        country_base_info,
                                        base_country
                                    )
                                "></button>
                        </td>
                    </tr>
                    <tr :key="index + 'ky'" v-if="getValue(country_base_info[index],'ky_shipping','is_open')">
                        <td v-text="'Fast shipping'"></td>
                        <td v-text="getValue(country_base_info[index],'ky_shipping','need_time_min','-') + ' - ' +getValue(country_base_info[index],'ky_shipping','need_time_max','-') + ' business days'"></td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_base_info[index],'ky_shipping','price','-','num')" type="unit|price" />
                        </td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_base_info[index],'ky_shipping','next_price','-','num')" type="unit|price" />
                        </td>
                    </tr>
                    <tr :key="index + 'ty'" v-if="getValue(country_base_info[index],'tk_shipping','is_open')">
                        <td v-text="'Express shipping'"></td>
                        <td v-text="getValue(country_base_info[index],'tk_shipping','need_time_min','-') + ' - ' +getValue(country_base_info[index],'tk_shipping','need_time_max','-') + ' business days'"></td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_base_info[index],'tk_shipping','price','-','num')" type="unit|price" />
                        </td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_base_info[index],'tk_shipping','next_price','-','num')" type="unit|price" />
                        </td>
                    </tr>
                </tbody>
                <!-- 当前选择的国家 -->
                <tbody v-for="(item, index) in active_country" :key="'country'  +index">
                    <tr :key="index + 'pk-active'">
                        <td v-text="item[1]" :rowspan="getValue(country_info,index,'length')"></td>
                        <td v-text="'Standard shipping'"></td>
                        <td v-text="getValue(country_info[index],'pk_shipping','need_time_min','-') + ' - ' +getValue(country_info[index],'pk_shipping','need_time_max','-') + ' business days'"></td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_info[index],'pk_shipping','price','-','num')" type="unit|price" />
                        </td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_info[index],'pk_shipping','next_price','-','num')" type="unit|price" />
                        </td>
                        <td :rowspan="getValue(country_info,index,'length')">
                            <button @click="delCountryInfo(country_info[index] || {},index)"></button>
                        </td>
                    </tr>
                    <tr :key="index + 'ky-active'" v-if="getValue(country_info[index],'ky_shipping','is_open')">
                        <td v-text="'Fast shipping'"></td>
                        <td v-text="getValue(country_info[index],'ky_shipping','need_time_min','-') + ' - ' +getValue(country_info[index],'ky_shipping','need_time_max','-') + ' business days'"></td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_info[index],'ky_shipping','price','-','num')" type="unit|price" />
                        </td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_info[index],'ky_shipping','next_price','-','num')" type="unit|price" />
                        </td>
                    </tr>
                    <tr :key="index + 'ty-active'" v-if="getValue(country_info[index],'tk_shipping','is_open')">
                        <td v-text="'Express shipping'"></td>
                        <td v-text="getValue(country_info[index],'tk_shipping','need_time_min','-') + ' - ' +getValue(country_info[index],'tk_shipping','need_time_max','-') + ' business days'"></td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_info[index],'tk_shipping','price','-','num')" type="unit|price" />
                        </td>
                        <td>
                            <CommonCurrencyRate :price="getValue(country_info[index],'tk_shipping','next_price','-','num')" type="unit|price" />
                        </td>
                    </tr>
                </tbody>
                <!-- 其他国家 -->
                <tbody>
                    <tr>
                        <td>Rest of World</td>
                        <td>Standard shipping</td>
                        <td>10 - 30 business days</td>
                        <td>
                            <span>Up to</span>
                            <CommonCurrencyRate :price=" world_price.price" type="unit|price" />
                        </td>
                        <td>
                            <span>Up to</span>
                            <CommonCurrencyRate :price=" world_price.next_price" type="unit|price" />
                        </td>
                        <td></td>
                    </tr>
                </tbody>
                <!-- 空状态 -->
                <tbody>
                    <tr class="empty">
                        <td :colspan="6">
                            <p @click="openDialog()">
                                <svg-icon name="user-search" />
                                Country
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="remote-sign">
            <p>1. For remote areas, shipping details like methods, times, and charges may vary. <a @click="remote = true">See details here.</a></p>
            <p>2. Our stable shipping rates save you from worrying about the fluctuation in your shipping costs. We will keep you informed prior to any changes in our shipping rates.</p>
        </div>

        <UxDialog :visible="country_dialog" @close="close()">

            <div class="country-dialog">

                <h2>Add country</h2>

                <UserSearchName v-model="search" size="large" shape="plain" placeholder="" />

                <ul v-if="country_list.length > 0">
                    <li v-for="item in country_list" :key="item[0]" :class="{ disabled: getCountryDisabled(item) }" @click="handlerClickCountry(item)">
                        <UxCheckbox :value="getCountryActive(item)" />
                        <span v-text="item[1]"></span>
                    </li>
                </ul>

                <p v-if="country_list == 0">
                    <SvgIcon name="order-warning" />
                    <span>No results found.Please try different keywords.</span>
                </p>

                <fieldset>
                    <button :class="{ disabled: select_country.length == 0 }" type="primary" @click="doAddCountry">OK</button>
                </fieldset>

            </div>
        </UxDialog>

        <LogisticsRemoteSign v-model="remote" />

    </div>
</template>
<script>
// import Country from "@/utils/country-shipping";
import SvgIcon from "../SvgIcon.vue";
let base_country = [
    ["US", "United States (USA)"],
    ["GB", "United Kingdom (UK)"],
    ["DE", "Germany"],
    ["AU", "Australia"],
    ["CA", "Canada"],
    ["IT", "Italy"],
    ["FR", "France"],
];
let tabs = [
    {
        icon: "t-shirt-icon",
        name: "T-shirt & tank tops",
        weight: 0.18,
        price: 1092, // 其他国家的默认价格
        next_price: 698,
    },
    {
        icon: "long-sleeves-icon",
        name: "Long sleeves & shorts",
        weight: 0.24,
        price: 1324,
        next_price: 930,
    },
    {
        icon: "sweatshirts-icon",
        name: "Hoodies & sweatshirts & pants",
        weight: 0.47,
        price: 2215,
        next_price: 1822,
    },
];
export default {
    components: { SvgIcon },
    name: "LogisticsComputed",
    data () {
        return {
            tabs,
            countries: [],
            info: {},
            timeout: null,
            country_dialog: false,
            search: "",
            active_weight: 0.18,
            base_country,
            active_country: [],
            select_country: [],
            country_base_info: [],
            country_info: [],
            tabsOpen: false,
            remote: false,
            loading: {
                table: true,
                base: false,
                country: false,
            },
        };
    },
    computed: {
        // 是否有loading状态
        is_loading: {
            get () {
                let obj = this.loading;
                let loading = false;
                Object.keys(obj).map((key) => {
                    if (obj[key]) {
                        loading = true;
                        return;
                    }
                });
                return loading;
            },
        },
        // 弹框的国家列表
        country_list: {
            get () {
                let keyword = this.search || "";
                const exist_list = [...this.base_country, ...this.active_country];
                const existSet = new Set(exist_list.map(i => i[0] || ""));
                let list = this.countries.filter(item => !existSet.has(item[0] || ""));// 筛选除了列表中已有的国家
                if (keyword == "") {
                    return list;
                } else {
                    keyword.trim(); //字符串去除两端空格
                    let exist = list.filter((item) => {
                        let str1 = item[1].toLowerCase();
                        let str2 = keyword.toLowerCase();
                        if (str1.indexOf(str2) != -1) return item;
                    });
                    return exist;
                }
            },
        },
        world_price: {
            get () {
                let weight = this.active_weight;
                let result = this.tabs.filter(item => item.weight == weight)[0]
                return result;
            },
        },
    },
    watch: {
        active_weight: {
            handler: function (val, oldval) {
                if (val != oldval) {
                    let promiseArr = [];
                    if (this.base_country.length > 0) {
                        // this.country_base_info = [];
                        promiseArr.push(
                            this.getInfo(
                                this.base_country,
                                this.country_base_info,
                                "empty"
                            )
                        );
                    }
                    if (this.active_country.length > 0) {
                        // this.country_info = [];
                        promiseArr.push(
                            this.getInfo(this.active_country, this.country_info, "empty")
                        );
                    }
                    this.$set(this.loading, "table", true);
                    Promise.all(promiseArr).then(() => {
                        this.$set(this.loading, "table", false);
                    });
                }
            },
        },
        //对用户的选择进行缓存，用的是浏览器localStrong
        base_country: {
            handler: function (v) {
                let user_logistics_select;
            },
            deep: true,
        },
    },
    methods: {
        setActiveWeight (item) {
            this.active_weight = item.weight;
            this.tabsOpen = false;
        },
        getValue (data, index, key, def, type) {
            // 原数据,索引,子项,键值,默认值
            let value = ((data || {})[`${index}`] || {})[`${key}`] || def || ''
            // if (type == 'num') {
            //     value = (value / 100).toFixed(2)
            // }
            return value
        },
        //选择国家弹窗关闭
        close () {
            this.country_dialog = false;
            this.select_country = [];
        },
        // 获取选中国家
        getCountryActive (arr) {
            let code = arr[0] || "";
            let list = [...this.active_country, ...this.select_country];
            let bol = list.find((i) => i[0] == code);
            return !!bol;
        },
        // 不显示已选择的国家
        getCountryDisabled (arr) {
            let code = arr[0] || "";
            let list = [...this.base_country, ...this.active_country];
            let bol = false;
            list.map((i) => {
                if (i[0] == code) {
                    bol = true;
                    return;
                }
            });
            return bol;
        },
        // 弹窗国家列表点击
        handlerClickCountry (arr) {
            let list = this.select_country;
            let index = list.findIndex(item => item[0] == arr[0])

            if (this.getCountryDisabled(arr)) {
                // 禁用的
            } else if (index < 0) {
                list.push(arr);
            } else {
                list.splice(index, 1);
            }
        },
        // 国家选择完成
        doAddCountry () {
            if (this.select_country.length > 0) {
                let select = JSON.parse(JSON.stringify(this.select_country));
                let diff = select.length + this.active_country.length - 20;
                if (diff > 0) {
                    // 提示文案
                    this.$uxMessage.warning(`Over ${diff} limits, up to 20 countries`);
                    return;
                }
                this.getInfo(this.select_country).then((res) => {
                    if (res) {
                        this.active_country = Array.from(
                            new Set([...this.active_country, ...select])
                        );
                    }
                });

                this.country_dialog = false;
            }
        },
        // 列表删除国家
        delCountryInfo (item, index, target, targetDelList) {
            let iso_code = item.iso_code;
            if (!target) {
                target = this.country_info; //默认目标数组
            }
            target.splice(index, 1);
            if (targetDelList) {
                this.delCountry(iso_code, targetDelList);
                return;
            }
            this.delCountry(iso_code);
        },
        delCountry (data, list) {
            let code = ""; //要删除的国家二制码
            let isArray = false; //是否是数组
            if (!list) {
                list = this.active_country;
            }
            if (Array.isArray(data)) {
                if (Array.isArray(data[0])) {
                    isArray = true;
                } else {
                    code = data[0];
                }
            } else {
                code = data;
            }
            if (!isArray) {
                let sub = -1; //索引值
                list.map((item, index) => {
                    if (item[0] == code) {
                        sub = index;
                    }
                });
                if (sub != -1) {
                    list.splice(sub, 1);
                }
            } else {
                data.map((item, index) => {
                    let code = item[0];
                    list.map((listItem, index) => {
                        if (listItem[0] == code) {
                            list.splice(index, 1);
                        }
                    });
                });
            }
        },
        // list 参数数组，targetData 保存数据目标数组， loading 控制加载开关
        async getInfo (list, targetData, loadingKey) {
            let iso_code = "";
            // 定义默认值
            if (!targetData) {
                targetData = this.country_info; // 保存的目标数组
            }
            if (!loadingKey) {
                loadingKey = "country"; // 控制加载部分
            }
            list.map((item) => {
                if (iso_code != "") {
                    iso_code += "|";
                }
                iso_code += item[0];
            });
            let weight = this.active_weight;
            let resData = {
                iso_code,
                weight,
            };
            this.$set(this.loading, loadingKey, true);
            let res = await this.$http("Order.getShippingInfo", resData);
            // let res = { code: 4, msg: "test" };
            if (res.code == 0) {


                if (loadingKey == 'empty') {
                    targetData.length = 0;
                }


                // 处理数据 res.data Arr
                res.data.map((item, index) => {
                    // let data = item.pk_shipping;
                    // data.price = (data.price / 100).toFixed(2);
                    // data.next_price = (data.next_price / 100).toFixed(2);
                    // data.iso_code = (list[index] || {})[0] || "";
                    // data.country = (list[index] || {})[1] || "";
                    let length = 0;
                    item.country = (list[index] || ['', ''])[1]
                    item.ky_shipping.is_open && (length += 1);
                    item.pk_shipping.is_open && (length += 1);
                    item.tk_shipping.is_open && (length += 1);
                    item.length = length;
                    targetData.push(item);
                });
                this.$set(this.loading, loadingKey, false);
                return true;
            } else {
                this.delCountry(list);
                this.$uxMessage.warning(res.msg);
                this.$set(this.loading, loadingKey, false);
            }
        },
        openDialog () {
            this.country_dialog = true
            this.search = ''
        },
        async getCountryList () {

            const response = await this.$http('Resource.countris');
            this.countries = (response.countries || []).map(item => [item.id, item.name])
        }
    },
    created () {
        if (process.client) {

            // 获取清单
            this.getCountryList();

            if (window.COUNTRY_BASE_INFO) {
                this.country_base_info = window.COUNTRY_BASE_INFO;
                this.loading.table = false;
            } else {
                this.getInfo(this.base_country, this.country_base_info, "table").then(() => {
                    window.COUNTRY_BASE_INFO = this.country_base_info;
                    this.loading.table = false;
                })
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.country-dialog {
    width: 320px;
    height: 460px;
    display: flex;
    flex-direction: column;

    & > h2 {
        font-size: 16px;
        font-family: Roboto-Medium;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        padding: 14px 0;
        text-align: center;
    }

    .user-search-name {
        margin: 0 16px;
        width: auto;
        height: 36px;
        flex: initial;
    }

    & > ul {
        flex: 1;
        overflow: auto;
        padding-top: 6px;

        li {
            display: flex;
            padding: 0 22px;
            height: 36px;
            align-items: center;
            cursor: pointer;

            .form-checkbox {
                margin-right: 12px;
            }
            & > span {
                font-size: 14px;
                font-family: Roboto, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 16px;
            }

            &:hover {
                background: #f6f6f6;
            }
        }
    }

    & > p {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px;
        svg {
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            color: #ccc;
        }
        span {
            margin-top: 8px;
            font-size: 14px;
            font-family: Roboto, Roboto;
            font-weight: 400;
            color: #919191;
            line-height: 16px;
            text-align: center;
        }
    }

    & > fieldset {
        display: flex;
        padding: 14px 20px;
        border-top: 1px solid #eeeeee;
        button {
            width: 100%;
        }
    }
}

.logistics-computed {
    padding: 80px 0 80px;
    > h4 {
        text-align: center;
        font-size: 32px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 46px;
        word-break: break-word;
        margin-bottom: 60px;
    }
    > h5 {
        position: relative;
        font-size: 14px;
        color: #000000;
        line-height: 24px;
        font-weight: normal;
        padding-left: 24px;
        svg {
            position: absolute;
            left: 0;
            display: inline-block;
            vertical-align: top;
            width: 16px;
            height: 16px;
            background: #a2a2a2;
            border-radius: 50%;
            fill: #fff;
            margin: 4px 4px 0 0;
        }
    }

    .computed-tabs {
        display: flex;
        flex-direction: column;
        align-items: center;
        .computed-tabs-wap {
            display: none;
        }
        ul {
            // width: 652px;
            display: flex;
            flex-direction: row;
            align-items: center;
            // border-bottom: 1px solid #dcdcdc;
            margin-bottom: 32px;
            > li {
                border-bottom: 1px solid #dcdcdc;
                position: relative;
                cursor: pointer;
                height: 48px;
                background: #fff;
                border-radius: 2px 2px 0 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                margin: 0 23px;
                padding: 0 20px;
                > span {
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 20px;
                    color: #575757;
                    // transition: all 0.3s;
                }
                & > svg {
                    width: 18px;
                    height: 18px;
                    margin-right: 6px;
                    // transition: all 0.3s;
                }

                &.active,
                &:hover {
                    > svg {
                        color: #ea4c89;
                    }
                    > span {
                        color: #ea4c89;
                    }
                }

                &.active {
                    &::before {
                        content: '';
                        display: block;
                        height: 2px;
                        width: 100%;
                        background: #ea4c89;
                        position: absolute;
                        bottom: 0;
                        transform: translateY(50%);
                    }
                }
            }
            &.disabled {
                & li {
                    pointer-events: none;
                    > svg {
                        color: #ddd;
                    }
                    > span {
                        color: #ddd;
                    }
                }
                & li.active {
                    > svg {
                        color: #ea4c89;
                    }
                    > span {
                        color: #ea4c89;
                    }
                }
            }
        }
    }
    .computed-table {
        position: relative;
        margin-bottom: 22px;
        z-index: 0;
        & > .computed-table-loading {
            position: absolute;
            margin: 1px;
            top: 60px;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
        }
        > table {
            border: 1px solid #e6e6e6;
            width: 100%;
            thead {
                tr {
                    th {
                        width: 172px;
                        box-sizing: border-box;
                        height: 60px;
                        background: #fafafa;
                        border: 1px solid #e6e6e6;
                        font-size: 14px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: 500;
                        color: #000000;
                        line-height: 20px;
                        text-align: center;
                        &:nth-last-child(1) {
                            width: 62px;
                        }
                    }
                }
            }
            tbody {
                @keyframes tdBackground {
                    0% {
                        background: #fff;
                    }
                    100% {
                        background: #f9fcfe;
                    }
                }

                tr {
                    td {
                        border: 1px solid #e6e6e6;
                        height: 52px;
                        background: #ffffff;
                        text-align: center;
                        font-size: 14px;
                        font-family: Roboto-Regular, Roboto;
                        font-weight: 400;
                        color: #000000;
                        line-height: 18px;

                        > button {
                            border-radius: 50%;
                            width: 18px;
                            height: 18px;
                            background: #f6f6f6;
                            padding: 0;
                            position: relative;
                            transition: none;
                            &::before {
                                content: '';
                                display: inline-block;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%) rotate(45deg);
                                width: 10px;
                                height: 2px;
                                border-radius: 50%;
                                background: rgb(102, 102, 102);
                            }
                            &::after {
                                content: '';
                                display: inline-block;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%) rotate(-45deg);
                                width: 10px;
                                height: 2px;
                                border-radius: 50%;
                                background: rgb(102, 102, 102);
                            }
                            &:hover {
                                border-color: transparent;
                                background: rgb(166, 166, 166);
                                &::before,
                                &::after {
                                    background: #fff;
                                }
                            }
                        }
                        &:nth-child(1) {
                            // text-align: left;
                            // padding-left: 18px;
                        }
                    }
                }
                tr.active_country {
                    td {
                        animation: tdBackground 0.5s ease 1 forwards;
                    }
                }
                tr.empty {
                    td {
                        padding: 0;
                        text-align: center;
                        p {
                            user-select: none;
                            display: inline-flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            height: 24px;
                            font-size: 16px;
                            font-weight: bold;
                            color: #000000;
                            line-height: 24px;
                            position: relative;
                            cursor: pointer;

                            > svg {
                                display: inline-block;
                                width: 24px;
                                height: 24px;
                                background: #000000;
                                border-radius: 4px;
                                color: transparent;
                                position: relative;
                                margin-right: 6px;
                                color: #fff;
                            }
                            &:hover {
                                color: #ea4c89;
                                & > svg {
                                    background: #ea4c89;
                                }
                            }
                        }
                    }
                }
                tr.loading {
                    td {
                        text-align: center;
                        padding: 0;
                        > img {
                            width: 24px;
                            height: 24px;
                        }
                    }
                }

                &:nth-child(2n) {
                    tr td {
                        background-color: #fafafa;
                    }
                }
            }
        }
        &.loading {
        }
        &::v-deep {
            .el-loading-mask {
                // top: -1px;
                // right: -1px;
            }
            .el-loading-spinner {
                .path {
                    stroke: #ea4c89;
                }
            }
        }
    }

    .remote-sign {
        font-size: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        p + p {
            margin: 10px 0 0;
        }

        a {
            color: #087196;
            cursor: pointer;
            text-decoration: underline;
            &:hover {
                text-decoration: none;
                color: #287e9c;
            }
        }
    }

    .Country-Choice {
        min-height: 32px;

        &::v-deep {
            input {
                color: #000;
            }
        }
    }
    .Style-Selection {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        button {
            &.active {
                border: 1px solid #ea4c89 !important;
                color: #ea4c89 !important;
            }
            cursor: pointer;
            width: 20%;
            height: 34px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 12px 12px 0;
            font-size: 14px;
        }
    }
    .quantity-selection {
        height: 40px;
        .quantity-selection-wrap {
            width: 194px;
            height: 34px;
            border-radius: 6px;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border: 1px solid #c6c6c6;
            .quantity-selection-btn {
                width: 36px;
                height: 34px;
                background: #f7f7f7;
                display: block;
                line-height: 34px;
                text-align: center;
                cursor: pointer;
                &:hover {
                    i {
                        color: #ea4c89;
                    }
                }
                i {
                    font-weight: 800;
                    font-size: 12px;
                    color: #000000;
                }
                &.add {
                    &.disable {
                        i {
                            color: #919191;
                        }
                    }
                    border-right: 1px solid #c6c6c6;
                }
                &.del {
                    border-left: 1px solid #c6c6c6;
                }
            }
            input {
                text-align: center;
                border: none;
                width: 118px;
                width: 80px;
                font-size: 14px;

                color: #000000;
                line-height: 16px;
                height: 34px;
            }
        }
    }
    .modeBox {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .solid {
            margin: 15px 20px;
            width: 100%;
            height: 1px;
            background-color: #f2f2f2;
        }
        > div {
            margin: 0 38px 8px 0;
            user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px 30px;
            width: 220px;
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid #f2f2f2;
            box-sizing: border-box;
            svg {
                height: 46px;
                width: 46px;
                margin: 0 0 14px 0;
            }
            i {
                font-size: 46px;
                line-height: 46px;
                margin: 0 0 14px 0;
            }
            h2 {
                font-size: 24px;
                color: #000000;
            }
            h3 {
                margin: 0 0 6px 0;
                font-size: 14px;
                color: #000000;
                font-weight: 400;
            }
            h4 {
                font-size: 14px;
                color: #aaaaaa;
                font-weight: 400;
                margin: 0 0 8px 0;
            }
        }
    }
}

@media (max-width: 960px) {
    .logistics-computed {
        padding: 0;

        & > h4 {
            padding: 18px 0;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 20px;
            margin: 0;
        }

        & > h5 {
            padding: 12px 0 32px 24px;
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            line-height: 24px;
        }
        .computed-tabs {
            position: relative;
            height: 38px;
            background: #ffffff;
            .computed-tabs-wap {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                border: 1px solid #c6c6c6;
                border-radius: 6px;
                box-sizing: border-box;
                svg {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    top: 50%;
                    right: 14px;
                    margin-top: -7px;
                    transition: transform 0.2s;
                }
            }
            & > ul {
                position: absolute;
                left: 0;
                top: 100%;
                width: 100%;
                flex-direction: column;
                align-items: initial;
                background-color: #fff;
                margin: 4px 0 0;
                box-sizing: border-box;
                border: 1px solid transparent;
                & > li {
                    background: none;
                    height: 52px;
                    width: 100%;
                    display: none;
                    box-sizing: border-box;
                    padding: 0 8px;
                    line-height: 52px;
                    justify-content: flex-start;
                    align-items: center;
                    border: none;
                    svg {
                        display: inline-block;
                        vertical-align: top;
                        width: 18px;
                        height: 18px;
                        margin-right: 6px;
                        color: #000 !important;
                        font-weight: normal;
                    }

                    span {
                        font-size: 14px;
                        color: #000 !important;
                        font-weight: normal;
                    }

                    &.active {
                        position: absolute;
                        left: 0;
                        top: -44px;
                        width: 100%;
                        display: flex;
                        line-height: 40px;
                        height: 40px;
                    }

                    &::before {
                        display: none !important;
                    }
                }
            }

            &.active {
                .computed-tabs-wap svg {
                    transform: rotate(180deg);
                }
                ul {
                    z-index: 1;
                    border: 1px solid #c6c6c6;
                    border-radius: 6px;
                    padding: 10px 0;
                    li {
                        display: flex;
                    }
                }
            }
        }
        .computed-table {
            margin-top: 14px;

            table thead tr th {
                font-size: 14px;
                line-height: 16px;
                padding: 8px 4px;
                &:nth-child(6) {
                    display: none;
                }
            }

            table tbody tr {
                td {
                    font-size: 14px;
                    line-height: 16px;
                    min-height: 52px;
                    height: 52px;
                    padding: 8px 4px;
                    box-sizing: border-box;
                    &:nth-child(6) {
                        display: none;
                    }
                }

                &.empty {
                    height: 52px;
                }
            }
        }
    }

    .country-dialog {
        width: auto;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .country-content {
            height: auto;
            flex: 1;
            ul li {
                height: 52px;
                line-height: 52px;
            }
        }
    }
}
</style>
